<template>
  <div class="root">
    <van-nav-bar
      class="navBar"
      @click-left="PageShow"
      title="发布活动"
      left-arrow
    />
    <div class="titleOne">活动详情</div>
    <van-form @submit="onSubmit">
      <div class="content">
        <van-field
          :rules="[{ required: true, message: '请填写活动亮点' }]"
          v-model="formObj.activeLight"
          rows="4"
          autosize
          type="textarea"
          maxlength="150"
          placeholder="请填写几句活动亮点，便于推荐活动,不超过150字"
          show-word-limit
        />
      </div>
      <div class="titleOne">活动内容</div>
      <div class="content-textarea">
        <van-field
          :rules="[
            { required: true, message: '请填写活动详情' },
            {
              validator: activeDetailRules,
              message: '不得出现微信等联系方式字样',
            },
          ]"
          v-model="formObj.activeContext"
          rows="10"
          autosize
          type="textarea"
          maxlength="150"
          placeholder="请填写活动详细介绍,不得出现微信等联系方式"
        />
      </div>
      <div class="subMit-button">
        <van-button
          class="subMit-buttonIcon"
          native-type="submit"
          :type="
            formObj.activeContext && formObj.activeLight ? '#f3b361' : '#b5b5b5'
          "
          >下一步</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  name: "Detail",
  data() {
    return {
      formObj: {
        //活动亮点
        activeLight: "",
        //活动内容
        activeContext: "",
      },
    };
  },
  methods: {
    //返回时向父元素发送消息(导航栏返回时候)
    PageShow() {
      this.$emit("scene-change", { ruleOk: false });
      this.$emit("activeFormRuleTrue", { ruleOk: false });
    },
    //表单校验成功触发(点击提交按钮)
    onSubmit() {
      this.$emit("scene-change", { ruleOk: false });
      this.$emit("activeFormRuleTrue", {
        ruleOk: true, //传递组件切换状态
        activeLight: this.formObj.activeLight, //传递数据
        activeContext: this.formObj.activeContext, //传递数据
      });
      //清空数据
      this.formObj.activeLight = "";
      this.formObj.activeContext = "";
    },
    //活动详情自定义规则
    activeDetailRules(val) {
      return !(
        //手机号和微信号校验
        (
          /1[3456789]\d{9}$/.test(val) ||
          /[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/.test(val)
        )
      );
    },
  },
};
</script>
<style scoped>
.root {
  width: 750px;
  height: 1993px;
  margin: 0 auto;
  font-size: 30px;
  background-color: #f7f7f7;
}
.navBar {
  height: 99px;
  font-size: 30px;
}
.titleOne {
  display: flex;
  justify-content: start;
  align-items: center;
  box-sizing: border-box;
  width: 750px;
  height: 160px;
  padding-left: 27px;

  font-weight: R;

  font-size: 30px;
}
.content {
  width: 698px;
  height: 310px;
  border-radius: 10px 10px 10px 10px;
  background: #ffffff;
  margin: 0 auto;
}
.content-textarea {
  width: 698px;
  height: 533px;
  border-radius: 10px 10px 10px 10px;
  background: #ffffff;
  margin: 0 auto;
}

.subMit-button {
  margin: 0 auto;
  height: 173px;
  width: 323px;
  margin-top: 120px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}
.subMit-buttonIcon {
  display: block;
  margin: 0 auto;
  width: 323px;
  height: 92px;
}
</style>
